<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
    <script src="../static/plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../static/plugins/elementui/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%;height: 550px">
        <el-table-column
                prop="date"
                label="日期"
                width="250"
                align="center">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="380"
                align="center">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini"                                                             @click="handleUpdate(scope.row)">编辑</el-button>
                <!--<el-button size="mini" type="danger"                                                 			@click="handleDelete(scope.row)">删除</el-button>-->
                <el-button type="danger" size="small" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!--分页栏-->
    <el-pagination
            background
            :current-page="paginationData.currentPage"
            :page-size="paginationData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginationData.total">
    </el-pagination>
</div>
<script>
    var  vm = new Vue({
        el:"#app",
        data:{
            //定义单独data对象管理分页
            paginationData:{
                pageSize:10, //
                total:100, //   数据模型定义 总记录数据   limit ?,?
                currentPage:1, //当前页
            },

            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }
            ]
        },
        methods:{
            handleDelete(index,row){
                //  删除之前 先要弹窗  给与用户确认提示
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //  这里一般 发送删除请求 给后台  ajax形式
                    // axios.get("xxx").then(()=>{
                    //     //  根据  res.flag   提示  删除成功信息
                    //     if(res.flag){
                    //         this.$message({
                    //             type: 'success',
                    //             message: '删除成功!'
                    //         });
                    //     }
                    this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</body>
</html>